<template>
  <div class="hotMusic">
    <div class="item" v-for="item of hotSongs" :key="item.id">
      <img :src="item.coverImgUrl" alt="" />
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotSongs: [],
    };
  },
  mounted() {
    this.$http(`http://122.112.161.135:3000/top/playlist/highquality`).then(
      (res) => {
        this.hotSongs = res.data.playlists;
      }
    );
  },
};
</script>

<style scoped>
.hotMusic{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.3rem 0;
}
.item {
  width: 2.8rem;
}
.item img {
  width: 100%;
  margin-bottom: 0.2rem;
}
</style>